import { useState } from "react";
import { motion } from "framer-motion";

const students = [
  { id: 1, name: "张三", studentId: "20230001", class: "高一(1)班" },
  { id: 2, name: "李四", studentId: "20230002", class: "高一(1)班" },
  { id: 3, name: "王五", studentId: "20230003", class: "高一(2)班" },
  { id: 4, name: "赵六", studentId: "20230004", class: "高二(1)班" },
];

export default function StudentManagement() {
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editForm, setEditForm] = useState({ name: "", studentId: "", class: "" });

  const handleEdit = (student: typeof students[0]) => {
    setEditingId(student.id);
    setEditForm({ name: student.name, studentId: student.studentId, class: student.class });
  };

  const handleSave = () => {
    setEditingId(null);
    // 这里应该是保存逻辑
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold text-[#2C3E50]">学生管理</h2>
        <div className="flex space-x-4">
          <button className="bg-[#2C3E50] hover:bg-[#1a2635] text-white px-4 py-2 rounded-lg">
            <i className="fas fa-file-import mr-2"></i>批量导入
          </button>
          <button className="bg-[#E74C3C] hover:bg-[#c0392b] text-white px-4 py-2 rounded-lg">
            <i className="fas fa-plus mr-2"></i>添加学生
          </button>
        </div>
      </div>

      {/* 学生列表 */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {students.map((student) => (
              <motion.tr 
                key={student.id}
                whileHover={{ backgroundColor: "rgba(236, 240, 241, 0.5)" }}
                className={editingId === student.id ? "bg-gray-100" : ""}
              >
                <td className="px-6 py-4 whitespace-nowrap">
                  {editingId === student.id ? (
                    <input
                      type="text"
                      value={editForm.name}
                      onChange={(e) => setEditForm({...editForm, name: e.target.value})}
                      className="border rounded px-2 py-1"
                    />
                  ) : (
                    student.name
                  )}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {editingId === student.id ? (
                    <input
                      type="text"
                      value={editForm.studentId}
                      onChange={(e) => setEditForm({...editForm, studentId: e.target.value})}
                      className="border rounded px-2 py-1"
                    />
                  ) : (
                    student.studentId
                  )}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {editingId === student.id ? (
                    <select
                      value={editForm.class}
                      onChange={(e) => setEditForm({...editForm, class: e.target.value})}
                      className="border rounded px-2 py-1"
                    >
                      <option value="高一(1)班">高一(1)班</option>
                      <option value="高一(2)班">高一(2)班</option>
                      <option value="高二(1)班">高二(1)班</option>
                    </select>
                  ) : (
                    student.class
                  )}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  {editingId === student.id ? (
                    <div className="flex space-x-2">
                      <button 
                        onClick={handleSave}
                        className="text-green-600 hover:text-green-800"
                      >
                        <i className="fas fa-check"></i>
                      </button>
                      <button 
                        onClick={() => setEditingId(null)}
                        className="text-red-600 hover:text-red-800"
                      >
                        <i className="fas fa-times"></i>
                      </button>
                    </div>
                  ) : (
                    <button
                      onClick={() => handleEdit(student)}
                      className="text-blue-600 hover:text-blue-800"
                    >
                      <i className="fas fa-edit"></i>
                    </button>
                  )}
                </td>
              </motion.tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 文件拖拽上传区域 */}
      <div className="mt-8">
        <div className="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center">
          <i className="fas fa-file-excel text-4xl text-green-600 mb-4"></i>
          <p className="text-gray-600 mb-2">拖拽Excel文件到此处上传</p>
          <p className="text-sm text-gray-500">或</p>
          <button className="mt-4 bg-[#2C3E50] hover:bg-[#1a2635] text-white px-4 py-2 rounded-lg">
            选择文件
          </button>
        </div>
      </div>
    </div>
  );
}
